<template>
  <div class="app-container">
    <el-form ref="form" :model="user" label-width="120px">
      <el-form-item label="用户名">
        <el-input v-model="user.username" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="user.password" />
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="user.siriusUserDetails.nickName" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="user.email" />
      </el-form-item>

      <el-form-item label="性别">
        <el-radio-group v-model="user.siriusUserDetails.sex">
          <el-radio :label="0">男</el-radio>
          <el-radio :label="1">女</el-radio>
          <el-radio :label="2">未知</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="个性签名">
        <el-input v-model="user.siriusUserDetails.description" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import user from "@/api/user"
  export default {
    data() {
      return {
        user: {
          email: '',
          username: '',
          password: '',
          siriusUserDetails: {
            nickName: '',
            sex: 0,
            description: ''
          }
        }
      }
    },
    watch: { //监听
      $route(to, from) { //路由变化方式，路由发生变化，方法就会执行
        this.init()
      }
    },
    created() {
      this.init()
    },

    methods: {
      onSubmit() {
        if (!this.user.id) {
          //添加
          this.addUser()
        } else {
          //修改
          this.updateUser()
        }
      },
      addUser() {
        user.addUser(this.user)
          .then(response => { //添加成功
            //提示信息
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
            //回到列表页面 路由跳转
            this.$router.push({
              path: '/user/list'
            })
          })
      },
      updateUser() {
        user.updateUser(this.user)
          .then(response => {
            //提示信息
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            //回到列表页面 路由跳转
            this.$router.push({
              path: '/user/userList'
            })
          })
      },
      init() {
        //判断路径有id值,做修改
        if (this.$route.params && this.$route.params.id) {
          //从路径获取id值
          const id = this.$route.params.id
          //调用根据id查询的方法
          this.getUserById(id)
        } else { //路径没有id值，做添加
          //清空表单
          this.user = {
            email: '',
            username: '',
            password: '',
            siriusUserDetails: {
              nickName: '',
              sex: 0,
              description: ''
            }
          }
        }
      },
      getUserById(id) {
        user.getUserById(id)
          .then(response => {
            this.user = response.data.userAndDetails
            console.log(this.user)
          })
      }
    }
  }
</script>

<style scoped>
  .line {
    text-align: center;
  }
</style>
